
import React, { forwardRef, useContext, useEffect, useState, useCallback } from 'react'
import { useSelector, useDispatch } from "react-redux";
import { Select, Input, Row, Col, Button } from 'antd';
import notify from "@utils/tip";
import CustomizeModal, { CustomizeModalContext, CustomizeModalButton } from "@common/presentational/CustomizeModal";
import { getWarehouseExpressPlatformList, getWarehouseOrdinaryExpressRegion } from "@sagas/warehouse/warehouseManagement";
import { creatWarehouseOrderDeliver } from "@sagas/warehouse/send";

const DeliverOrderContent = props => {
    const { hide, params } = useContext(CustomizeModalContext)
    const { deliver_type, order_number } = params
    const { id, callback } = props
    const [platformId, setPlatformId] = useState()
    const [platformOrderNumber, setPlatformOrderNumber] = useState('')
    const [platformDeliverFee, setPlatformDeliverFee] = useState('')

    const handlePlatformIdChange = useCallback(value => {
        setPlatformId(value)
    }, [])
    const handlePlatformOrderNumberChange = useCallback(e => {
        setPlatformOrderNumber(e.currentTarget.value)
    }, [])
    const handlePlatformDeliverFeeChange = useCallback(e => {
        setPlatformDeliverFee(e.currentTarget.value)
    }, [])
    const dispatch = useDispatch()
    const { warehouseOrdinaryExpressRegion, warehouseExpressPlatform } = useSelector(state => state.warehouseManagement)

    const getSelection = () => {
        if (deliver_type === 1) {
            dispatch(getWarehouseExpressPlatformList({id}))
        } else {
            dispatch(getWarehouseOrdinaryExpressRegion({id}))
        }
    }

    useEffect(() => {
        getSelection()
    }, [])

    const submitSend = () => {
        dispatch(creatWarehouseOrderDeliver({
            id,
            platformId,
            platformOrderNumber,
            platformDeliverFee: parseInt(platformDeliverFee),
            orderNumber: order_number,
            deliverType: deliver_type
        },()=>{
            notify('发货完成', 'success')
            callback && callback()
            hide()
        }))
    }

    return (
        <>
            <Row className="modal-line">
                <Col span={4}>
                    <span className='ft-clr-d'>承运商:</span>
                </Col>
                <Col span={20}>
                    <Select
                        value={platformId}
                        placeholder="请选择承运商"
                        onChange={handlePlatformIdChange}
                    >
                        {deliver_type === 1 ? (warehouseExpressPlatform || []).map(platform => (
                            platform.status === 1 && <Select.Option
                                key={platform.id}
                                value={platform.id}
                            >
                                {platform.name}
                            </Select.Option>
                        )) : (warehouseOrdinaryExpressRegion.platforms || []).map(platform => (
                            <Select.Option
                                key={platform.id}
                                value={platform.id}
                            >
                                { platform.name}
                            </Select.Option>
                        ))}
                    </Select>
                </Col>
            </Row>
            <Row className="modal-line">
                <Col span={4}>
                    <span className='ft-clr-d'>快递单号:</span>
                </Col>
                <Col span={20}>
                    <Input placeholder='输入快递单号' value={platformOrderNumber} onChange={handlePlatformOrderNumberChange} />
                </Col>
            </Row>
            <Row className="modal-line">
                <Col span={4}>
                    <span className='ft-clr-d'>快递费:</span>
                </Col>
                <Col span={20}>
                    <Input placeholder='输入快递费' value={platformDeliverFee} onChange={handlePlatformDeliverFeeChange} />
                </Col>
            </Row>
            <CustomizeModalButton
                onOk={submitSend}
                onCancel={hide}
            />
        </>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal title={'发货'} ref={ref}>
        <DeliverOrderContent {...props} />
    </CustomizeModal>
))